<wide-header-page title="{{'Offers' | translate}}">
  <div page-content>
    <ion-list class="bp-list">
      <ion-item>
        <ion-row>
          <ion-col>
            <div class="summary-title" translate>Amount</div>
            <div class="summary-description"><span *ngIf="currency === 'USD'">$</span>{{amount}} <span *ngIf="currency !== 'USD'">{{currency}}</span></div>
          </ion-col>
          <ion-col>
            <div class="summary-title" translate>Crypto</div>
            <div class="summary-description"><img class="coin-icon" src="assets/img/currencies/{{coin}}.svg" /> {{coin | uppercase}}</div>
          </ion-col>
          <ion-col col-4>
            <div class="summary-title" translate>Payment Method</div>
            <div class="summary-description">{{paymentMethod?.label}}</div>
          </ion-col>
          <ion-col align-self-center>
            <div class="edit-container" (click)="goToEdit()">
              <div class="edit-label" translate>
                Edit
              </div>
            </div>
          </ion-col>
        </ion-row>
      </ion-item>
    </ion-list>

    <div class="card-container" *ngFor="let offer of (offers | keys) | orderBy : ['-amountReceiving']">
      <div translate class="offer-btn" *ngIf="offer.value.fiatMoney" (click)="goTo(offer.key)">
        Buy
      </div>
      <div class="offer-card" (click)="expandCard(offer)" tappable *ngIf="offer.value.showOffer">
        <div class="content" *ngIf="!offer.value.fiatMoney && !offer.value.errorMsg" class="loader">
          <ion-spinner></ion-spinner>
        </div>
        <div class="content" translate *ngIf="offer.value.fiatMoney || offer.value.errorMsg">
          <div *ngIf="offer.value.errorMsg">
            <div class="main-label error-label">
              <span class="error-title">Error: </span>
              <span class="error-msg">
                {{offer.value.errorMsg}}
              </span>
            </div>
          </div>

          <div class="visible-container">
            <div class="visible-info">
              <div *ngIf="offer.value.fiatMoney && !offer.value.errorMsg">
                <div class="main-label">{{offer.value.amountReceiving }} {{coin | uppercase}}</div>
                <div class="secondary-label">1 {{coin | uppercase}} = <span *ngIf="fiatCurrency?.toUpperCase() === 'USD'">$</span>{{offer.value.fiatMoney | number:'1.2-2'}} <span *ngIf="fiatCurrency?.toUpperCase() !== 'USD'">{{fiatCurrency}}</span></div>
              </div>
              <div class="provider">
                <span translate class="secondary-label">Provided by</span>
                <img [src]="themeProvider.currentAppTheme !== 'dark' ? offer.value.logoLight : offer.value.logoDark">
              </div>
            </div>
          </div>
          <div class="extended-info" [ngClass]="{'expanded': offer.value.expanded}">
            <ion-list class="bp-list">
              <ion-item>
                <ion-label>
                  <div class="summary-item">
                    <span>{{"Buy Amount" | translate}}</span>
                  </div>
                </ion-label>
                <ion-note item-end>
                  <div class="summary-item-detail">
                    <span>
                      <span *ngIf="fiatCurrency?.toUpperCase() === 'USD'">$</span>{{ offer.value.buyAmount | number : '1.2-2' }} <span *ngIf="fiatCurrency?.toUpperCase() !== 'USD'">{{fiatCurrency}}</span>
                    </span>
                  </div>
                </ion-note>
              </ion-item>
              <div class="summary-item-detail-sec">
                <span>{{ offer.value.amountReceiving }} {{coin | uppercase}}</span>
              </div>
              <ion-item>
                <ion-label>
                  <div class="summary-item">
                    <span>{{"Fee" | translate}}</span>
                  </div>
                </ion-label>
                <ion-note item-end>
                  <div class="summary-item-detail">
                    <span>
                      <span *ngIf="fiatCurrency?.toUpperCase() === 'USD'">$</span>{{ offer.value.fee | number : '1.2-2' }} <span *ngIf="fiatCurrency?.toUpperCase() !== 'USD'">{{fiatCurrency}}</span>
                    </span>
                  </div>
                </ion-note>
              </ion-item>
              <ion-item [ngStyle]="{'border-top': coinBorderColor}">
                <ion-label>
                  <div class="summary-item total">
                    <span>{{"TOTAL" | translate}}</span>
                  </div>
                </ion-label>
                <ion-note item-end>
                  <div class="summary-item-detail total">
                    <span>
                      <span *ngIf="fiatCurrency?.toUpperCase() === 'USD'">$</span>{{ offer.value.amountCost | number : '1.2-2' }} <span *ngIf="fiatCurrency?.toUpperCase() !== 'USD'">{{fiatCurrency}}</span>
                    </span>
                  </div>
                </ion-note>
              </ion-item>
            </ion-list>
            <div class="terms">
              <div *ngIf="offer.key == 'simplex'">
                <div>
                  <span translate>What service fees am I paying?</span>
                  <br>
                  <span *ngIf="paymentMethod.method == 'sepaBankTransfer'" translate>
                    1.5% of the amount.
                  </span>
                  <span *ngIf="paymentMethod.method != 'sepaBankTransfer'">
                    <span translate>Can range from 2.5% to 5% of the transaction, depending on the volume of traffic (with a minimum of 10 USD or its equivalent in any other fiat currency) + 1% of the transaction.</span>
                    <a (click)="openExternalLink('https://support.simplex.com/hc/en-gb/articles/360014078420-What-fees-am-I-paying-')" translate>
                      Read more
                    </a>
                  </span>
                </div>
                <div>
                  <span translate>This service is provided by a third party, and you are subject to their </span>
                  <a (click)="openExternalLink('https://www.simplex.com/terms-of-use/')" translate>
                    Terms of use
                  </a>
                </div>
              </div>
              <div *ngIf="offer.key == 'wyre'">
                <div>
                  <span translate>What service fees am I paying?</span>
                  <br>
                  <span translate *ngIf="selectedCountry.shortCode == 'US'">5 USD minimum fee or 2.9% of the amount + 0.30 USD, whichever is greater + Required miners fee.</span>
                  <span translate *ngIf="selectedCountry.shortCode != 'US'">5 USD minimum fee or 3.9% of the amount + 0.30 USD, whichever is greater + Required miners fee.</span>
                  <span translate *ngIf="fiatCurrency?.toUpperCase() != 'USD'">Or its equivalent in {{ fiatCurrency?.toUpperCase() }}.</span>
                  &nbsp;
                  <a (click)="openExternalLink('https://support.sendwyre.com/en/articles/3359160-wyre-card-processing-fees')" translate>
                    Read more
                  </a>
                </div>
                <div>
                  <span translate>This service is provided by a third party, and you are subject to their </span>
                  <a (click)="openExternalLink('https://www.sendwyre.com/user-agreement/')" translate>
                    User Agreement
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="terms-general">
      <div translate>The final crypto amount you receive when the transaction is complete may differ because it is based on the exchange rates of the providers.</div>
      <div translate>Additional third-party fees may apply.</div>
    </div>
  </div>
</wide-header-page>